import React from 'react';
import tools from '../../common/tools';

const tpltypes=[
    {name:'选择类型',value:''}
    ,{name:'多数据表',value:'items'}
    ,{name:'单数据表(暂不支持)',value:'item'}
];

class NewTPL extends React.Component {
    constructor(props){
        super();
        this.control=null;
        this.state={
            tpl_name:'',
            tpl_enname:'',
            tpl_type:'',
            tpl_desc:''
        };

        this.btns=[
            {name:'取消', evt:'cancel'},
            {name:'确认', evt:'ok'}
        ];
        if(props.control!=undefined){
            this.initControl(props.control);
        }
        this.handleClick = this.handleClick.bind(this);
        this.handleChange = this.handleChange.bind(this);
    }
    initControl(hooks){
        let that=this;
        this.control=hooks;
        this.control.addHook('show',function(data){
            let params=data.params;
            if(params!=undefined){
                that.setState(params.state);
            }
            $('#g_newtplbox').modal('show');
        });
        this.control.addHook('hide',function(){
            $('#g_newtplbox').modal('hide');
        });
    }
    render(){
        let that=this;
        return (
            <div id="g_newtplbox" className="modal fade" style={{display:"none"}} >
                <div className="modal-dialog">
                    <div className="modal-content">
                    <div className="modal-header">
                        <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 className="modal-title">新建模板</h4>
                    </div>
                    <div className="modal-body">
                        <form className="form-horizontal">
                            <div className="form-group">
                                <label for="tpl_name" className="col-sm-2 control-label">模板名称</label>
                                <div className="col-sm-10">
                                    <input type="text" className="form-control" id="tpl_name" placeholder="请输入模板名称，可以为中文" value={this.state.tpl_name} onChange={this.handleChange}/>
                                </div>
                            </div>
                            <div className="form-group">
                                <label for="tpl_enname" className="col-sm-2 control-label">模板英文名称（可选）</label>
                                <div className="col-sm-10">
                                    <input type="text" className="form-control" id="tpl_enname" placeholder="请输入模板英文名称,该名称会默认为表名" value={this.state.tpl_enname} onChange={this.handleChange}/>
                                </div>
                            </div>
                            <div className="form-group">
                                <label for="tpl_desc" className="col-sm-2 control-label">模板说明</label>
                                <div className="col-sm-10">
                                    <input type="text" className="form-control" id="tpl_desc" placeholder="请输入模板说明" value={this.state.tpl_desc} onChange={this.handleChange}/>
                                </div>
                            </div>
                            <div className="form-group">
                                <label for="tpl_name" className="col-sm-2 control-label">模板类型</label>
                                <div className="col-sm-10">
                                    <select className="form-control" id="tpl_type" value={that.state.tpl_type} onChange={this.handleChange}>
                                        {
                                            tpltypes.map(e=>{
                                                return <option key={e.name} value={e.value}>{e.name}</option>
                                            })
                                        }
                                    </select>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div className="modal-footer">
                        {
                            this.btns.map(e=>{
                                let cls=tools.getBtnCls(e.evt);
                                return <button type="button" className={cls} key={e.evt} data-evt={e.evt} onClick={that.handleClick} >{e.name}</button>
                            })
                        }
                    </div>
                    </div>
                </div>
            </div>
        );
    }
    handleClick(e){
        let that=this;
        let evt=e.target.getAttribute('data-evt');
        if(this.control!==null&&evt!=='cancel'){
            this.control.dispatch('callback',this.state);
        }
        that.control.dispatch('hide');
    }
    handleChange(e){
        let that=this;
        let key=e.target.getAttribute('id');
        let filed={};
        filed[key]=e.target.value;
        this.setState(filed);
    }
}

export default NewTPL;